<template>
  <div class="historyOder">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-row>
          <el-col :span="17">
            <el-card class="box-card">
              <p style="font-size:24px;margin: 0 0 15px">历史订单</p>
              <div v-if="isFlag===0" style="text-align: center">
                <el-image :src="src"></el-image>
                <p style="font-family:'黑体';font-size:20px">您还没有订单!</p>
              </div>
              <div v-else>
                <el-table
                  :data="tableData"
                  height="400"
                  border
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="id"
                    label="订单号"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="mobile"
                    label="手机号">
                  </el-table-column>
                  <el-table-column
                    prop="total"
                    label="合计">
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="支付状态">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="handleView(scope.$index, scope.row)">查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
            <!--    查看详情        -->
            <el-dialog
              title="订单详情"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="closeDialog">
              <div>
                <h4>收货地址</h4>
                <div style="margin-top: 20px">
                  <div><strong>姓名：</strong>{{addressDate.name}}</div>
                  <br>
                  <div><strong>电话：</strong>{{addressDate.mobile}}</div>
                  <br>
                  <div><strong>省份：</strong>
                    <el-cascader style="width: 200px" size="mini" v-model="addressDate.province"
                                 :options="options"
                                 disabled></el-cascader>
                  </div>
                  <br>
                  <div><strong>地址：</strong>{{addressDate.address}}</div>
                  <br>
                </div>
                <h4>订单项</h4>
                <el-table
                  :data="orderList"
                  border
                  height="300"
                  stripe
                  @row-dblclick="showDetailInfo"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="50">
                  </el-table-column>
                  <el-table-column label="图片" width="80">
                    <template slot-scope="scope">
                      <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.commodity.imgUrl"
                        fit="scale-down"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="commodity.cname"
                    label="商品名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="commodity.model"
                    label="型号">
                  </el-table-column>
                  <el-table-column label="数量" width="155">
                    <template slot-scope="scope">
                      <el-input-number v-model="scope.row.count" size="mini" :step="1" step-strictly
                                       :min="1" @change="updateCount()"></el-input-number>
                    </template>
                  </el-table-column>

                  <el-table-column label="单价">
                    <template slot-scope="scope">
                      ￥ {{scope.row.commodity.price}}
                    </template>
                  </el-table-column>
                  <el-table-column label="总计">
                    <template slot-scope="scope">
                      ￥ {{scope.row.total=scope.row.count * scope.row.commodity.price}}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-dialog>
          </el-col>
          <el-col :span="6" :offset="1">
            <account></account>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import account from "~/pages/account/account.vue";
  import topBar from '~/components/topBar.vue'
  import * as OrderRequest from '../../assets/order/order'
  import cityCode from "~/assets/address/city_code.json";

  export default {
    components: {
      account,
      topBar
    },
    data() {
      return {
        isFlag: 0,
        tableData: [],
        orderList: [],
        options:[],
        addressDate: {
          name: '',
          mobile: '',
          province: [],
          address: '',
          isDefault: false
        },
        dialogVisible: false,
        src: 'http://theme.opencartdemo.cn/smart-3200-free/catalog/view/theme/default/image/no_items.png'
      };
    },
    methods: {
      showDetailInfo(row, col) {
        this.$router.push({
          path: '/category/detail',
          query: {category: row.commodity.id}
        })
      },
      closeDialog() {
        this.dialogVisible = false
      },
      handleView(index, row) {
        this.orderList = row.orderItems
        this.addressDate = {
          name: row.name,
          mobile: row.mobile,
          province: JSON.parse(row.province),
          address: row.address,
        }
        this.dialogVisible = true
        console.log(index, row)
      }
    },
    mounted() {
      this.options = cityCode
      OrderRequest.getOrderList(this)
    }
  };
</script>

<style lang="less">
  .historyOder {
    margin-bottom: 30px;

    .box-card {
      border-radius: 12px;
    }
  }
</style>
